<template>
  <div class="title">📔 QueOJ 问答板块</div>
  <div class="add-ask">
    <el-button @click="addAsk">我要提问</el-button>
  </div>
  <div class="s-container">
    <el-card class="box-card"
             shadow="hover"
             v-for="s in asks"
             :key="s.id"
             @click="$goRoute('/ask/'+s.id)">
      <template #header>
        <div class="s-title">
          {{ s.title }}
        </div>
      </template>
      <div class="s-foot">
        <div class="s-nickname">
          提问用户 🙋： {{ s.nickname }}
        </div>
        <div class="s-time">
          提问日期⌚： {{ new Date(s.time * 1000).toLocaleDateString() }}
        </div>
      </div>
    </el-card>
  </div>
  <el-dialog v-model="modalVisible" title="提问" :before-close="onCloseModal">
    <el-form :model="form" label-width="80px">
      <el-form-item label="问题标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="问题详情">
        <el-input v-model="form.content" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {Ask} from "../utils/http/ask";
import {ElMessageBox} from "element-plus";
import {Solution} from "../utils/http/solutions";

export default {
  name: "AskCenter",
  data:function (){
    return{
      asks :[],
      modalVisible : false,
      form : {
        title:"",
        content:""
      }
    }
  },
  methods:{
    async getAllAsk(){
      let resp = await Ask.getAllAsk()
      if (resp.success){
        this.asks = resp.data.asks
      }
    },
    addAsk(){
      this.form = {
        title:"",
        content:""
      }
      this.modalVisible = true
    },
    async onSubmit(){
      let resp = await Ask.addAsk({
        nickname:this.$store.state.userInfo.nickname,
        title:this.form.title,
        content:this.form.content
      });
      if (resp.success){
        this.$success("提问成功")
        this.modalVisible = false
        this.getAllAsk()
      }else {
        this.$error("提交失败 : "+resp.message)
      }
    },
    onCloseModal(done){
      ElMessageBox.confirm(
        '您的修改尚未保存，确认关闭？',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          done()
        })
        .catch(()=>{})
    }
  },
  mounted() {
    this.getAllAsk()
  }
}
</script>

<style scoped>
.title {
  font-size: 36px;
  margin-bottom: 20px;
}
.s-container{
  width: 800px;
  margin: 0 auto;
}
.box-card {
  font-size: 16px;
  margin: 20px;
  font-weight: normal;
  cursor: pointer;
  text-align: left;
}

.s-title {
  font-size: 20px;
  text-align: left;
}

.s-summary {
  height: 100px;
}

.s-foot {
  display: flex;
  justify-content: space-between;
}
</style>
